<template>
  <div style="display: flex; justify-content: space-between">
    <span>{{ completeTotal }}/{{ total }}</span>
    <el-button-group>
      <el-button type="primary" @click="toggleAll(true)">全部完成</el-button>
      <el-button type="primary" @click="clearCompleted">删除完成</el-button>
      <el-button type="primary" @click="clearAll">全部删除</el-button>
    </el-button-group>
  </div>
</template>

<script lang="ts" setup>
import { useTodoCtx } from '../useTodo'

const { completeTotal, total, clearAll, toggleAll, clearCompleted } = useTodoCtx()!
</script>
